<template>
  <div class="hello">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;font-weight: bold;">数据统计</span>
      </div>
      <div>
        <el-card class="box-card">
          <label style="display: block; font-weight: bold;font-size: 14px; margin-bottom: 10px;">按地区统计</label>
          <div class="filter-container">
            <RegionAddress ref="RegionAddress"
                           class="region-address"
                           @provinceChanged="onProvinceChanged"
                           @cityChanged="onCityChanged"
                           @districtChanged="onDistrictChanged">
            </RegionAddress>
            <el-button size="small" @click="onSearch" :disabled="counting">统计</el-button>
            <el-button size="small" @click="onReset" :disabled="counting">重置</el-button>
          </div>
          <ListContainer ref="SettingList"
                         resource-uri="group/setting"
                         resource-name="setting"
                         :params="params"
                         v-on:fetched="onFetched" v-show="false">
          </ListContainer>
          <div>
            <ul>
              <span style="font-weight: bold;" v-if="counting">正在计算...</span>
              <li>
                免费拼团人数：{{freeNums.text}}
              </li>
              <li>
                收费拼团人数：{{participationNums.text}}
              </li>
            </ul>
          </div>
        </el-card>

      </div>
    </el-card>

  </div>
</template>

<script>
  import ListContainer from '../ListContainer.vue'
  import RegionAddress from '../Address/Address.vue'

  export default {
    data () {
      return {
        params: {
          is_statistics: 1
        },
        filterParams: {
          province_region_id: null,
          city_region_id: null,
          district_region_id: null
        },
        counting: true,
        freeNums: null,
        participationNums: null
      }
    },
    created () {
      this.freeNums = this.resetData()
      this.participationNums = this.resetData()
    },
    methods: {
      resetData () {
        if (this.$refs.SettingList) {
          this.$refs.SettingList.total_items = 0
          this.$refs.SettingList.page = 1
        }
        return {
          text: '正在计算中...',
          maleNums: 0,
          femaleNums: 0,
          total: 0
        }
      },
      onFetched: function (data) {
        console.dir(data)
        this.freeNums.maleNums = data[0].male_free_participation_totals || 0
        this.freeNums.femaleNums = data[0].female_free_participation_totals || 0
        this.freeNums.total = data[0].free_articipation_totals || 0
        this.participationNums.maleNums = data[0].male_participation_totals || 0
        this.participationNums.femaleNums = data[0].female_participation_totals || 0
        this.participationNums.total = data[0].participation_totals || 0

        this.freeNums.text = this.freeNums.maleNums + '/' + this.freeNums.femaleNums + '/' + this.freeNums.total + '（男/女/总）'

        this.participationNums.text = this.participationNums.maleNums + '/' +
                                       this.participationNums.femaleNums + '/' +
                                       this.participationNums.total + '（男/女/总）'

        this.counting = false
      },
      onProvinceChanged (value) {
        if (this.counting) {
          return
        }
        this.filterParams.province_region_id = value
      },
      onCityChanged (value) {
        if (this.counting) {
          return
        }
        this.filterParams.city_region_id = value
      },
      onDistrictChanged (value) {
        if (this.counting) {
          return
        }
        this.filterParams.district_region_id = value
      },
      onSearch () {
        if (this.filterParams.province_region_id || this.filterParams.city_region_id || this.filterParams.district_region_id) {
          if (this.counting) {
            return false
          } else {
            this.counting = true
          }

          let params = {
            is_statistics: 1
          }
          for (let key of Object.keys(this.filterParams)) {
            if (this.filterParams[key] && this.filterParams[key] !== null) {
              params[key] = this.filterParams[key]
            }
          }
          this.freeNums = this.resetData()
          this.participationNums = this.resetData()

          this.params = params
        }
      },
      onReset () {
        if (this.filterParams.province_region_id || this.filterParams.city_region_id || this.filterParams.district_region_id) {
          if (this.counting) {
            return false
          } else {
            this.counting = true
          }

          this.$refs.RegionAddress.regionValue.province = null

          this.freeNums = this.resetData()
          this.participationNums = this.resetData()

          this.params = {
            is_statistics: 1
          }
        }
      }
    },
    components: {
      ListContainer,
      RegionAddress
    }
  }
</script>

<style scoped>
  div.hello {
    min-height: 100%;
  }

  div.box-card {
    margin-bottom: 1rem;
  }
  .filter-container {
    display: inline-block;
    margin-bottom: 5px;
  }
  .region-address {
    display: inline-block;
    margin-right: 10px;
  }
  .el-button + .el-button {
    margin-left: 0;
  }

  li + li {
    margin-top: 10px;
  }
</style>
